<template>
  <div class="h-[100vh]">
    <el-container>
      <!-- 顶部 -->
      <el-header style="height: 10vh;" class="bg-slate-400 flex items-center justify-between px-5">
        <div class="flex items-center gap-2">
          <p class="text-2xl text-white font-serif">比奇堡后台管理</p>
          <img src="./assets/Spongebob.png" class="w-8 h-8">
        </div>
        <div class="flex items-center">
          <span class="text-white">欢迎您，admin！</span>
          <img src="./assets/avatar.jpg" class="w-10 h-10 rounded-full">
        </div>
      </el-header>
      <!-- 主体 -->
      <el-container class="h-[90vh]">
        <!-- 左侧栏 -->
        <el-aside width="15rem">
          <el-menu :default-active="activePath" router>
            <!-- <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>Navigator One</span>
              </template>
<el-sub-menu index="1-4">
  <template #title><span>item four</span></template>
  <el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu> -->
            <el-menu-item index="/" @click="handleClick">
              <el-icon><icon-menu /></el-icon>
              <template #title>商品管理</template>
            </el-menu-item>
            <el-menu-item index="/mail" @click="handleClick">
              <el-icon>
                <setting />
              </el-icon>
              <template #title>邮件管理</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 右侧主体 -->
        <el-main class="bg-slate-100">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { ref } from 'vue';
interface MenuItemRegistered {
  index: string
  indexPath: string[]
  active: boolean
}
const activePath = ref(sessionStorage.getItem("path")||'/')
const handleClick = (MenuItemRegistered: MenuItemRegistered) => {
  sessionStorage.setItem("path", MenuItemRegistered.index)
}
</script>
<style scoped>
.el-menu {
  border-right: 0;
}
</style>
